import React, { useEffect, useState, useCallback } from 'react';
import Footer from '@/components/Footer';
import LoginForm from './form';
import styles from './style/index.module.less';
import ResetPassword from '@/pages/login/resetPassword';
import { Message, Notification } from '@arco-design/web-react';

import { setValidPassword } from '@/api/userData';

function Login() {
  useEffect(() => {
    document.body.setAttribute('arco-theme', 'light');
  }, []);

  const [resetPwdVisible, setResetPwdVisible] = useState(false);

  const handleResetPwd = () => {
    handleResetVisible(true);
  };
  const handleResetVisible = useCallback((visible) => {
    setResetPwdVisible(visible);
  }, []);

  const confirmResetPwd = useCallback(async (data) => {
    if (data.password !== data.againPassword) {
      Message.error('两次密码不一致');
      return;
    }

    const res: any = await setValidPassword({
      AccountPassword: data.password,
    });

    // 重置密码成功去登录
    if (res.StatusCode === 200) {
      Notification.success({
        title: '密码重置成功',
        content: '请使用新密码进行登录',
        duration: 5000,
      });
      handleResetVisible(false);
    } else {
      Message.error(res.Message);
    }
  }, []);

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.Box}>
          <div className={styles.imgBox}>
            <img
              src="//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp"
              alt=""
            />
          </div>
          <LoginForm onResetPwd={handleResetPwd} />
        </div>
        <div className={styles.footer}>
          <Footer />
        </div>
      </div>

      <ResetPassword
        visible={resetPwdVisible}
        modalTitle="重设密码"
        onConfirm={confirmResetPwd}
        handleChangeVisible={handleResetVisible}
      ></ResetPassword>
    </div>
  );
}
Login.displayName = 'LoginPage';

export default Login;
